/*
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-07-07 08:35:27
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-07-19 17:16:15
 * @FilePath: /amap/src/components/createComponent.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// utils/createComponent.ts
import { createApp, type Component, type App } from 'vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export function createComponent<TProps extends object>(
  Component: Component,
  props?: TProps
) {
  // 创建独立容器
  const container = document.createElement('div');
  document.body.appendChild(container);
 // 定义销毁方法
  const close= () => {
    console.log('Component closed');
    // 卸载应用并移除容器
    if (app) {
      app.unmount();
      document.body.removeChild(container);
      app = null; // 释放内存
    }
  };
 
  // 创建子应用实例
  let app: App | null = createApp(Component, {
    ...props,
    // 暴露关闭方法给组件内部
    onClose: () => close()
  });
 
  app.use(ElementPlus) // 使用 Element Plus 作为 UI 框架
  // 挂载应用
  app.mount(container);
 
  return {
    close,
    // 可扩展其他控制方法
  };
}
